<template>
	<view class="container" :style="{height: screenHight + 'px'}">
		<view class="title">
			修改密码
		</view>
		<view class="main">
			<uni-transition ref="ani" custom-class="transition" :duration="325"
							mode-class="slide-right" :show="step1Show">
				<view class="step1">
					<input type="number" @input="getAccount" placeholder="请输入账号" style="transition: all 0.4s ease-in;">
					<input type="text" @input="getEmail" @blur="checkMail" 
						   placeholder="请输入邮箱"
						   style="transition: all 0.2s ease-in;" :style="{border: errorStyle}">
					<view class="code">
						<input type="number" maxlength=6 @input="getCode" placeholder="请输入验证码">
						<view class="sendCode" @click="sendCode" :style="{opcity: isGetCode==true?1:0.618}">
							<view v-if="isGetCode">
								{{wait}}秒后再次发送
							</view>
							<view v-if="!isGetCode">
								发送验证码
							</view>
						</view>
					</view>
					
					<view class="next" @click="next">
						开始修改密码
					</view>
				</view>
			</uni-transition>
				
			<uni-transition ref="ani" custom-class="transition" :duration="325"
							mode-class="slide-left" :show="step2Show">
				<view class="step2">
					<input type="text" placeholder="请设置新密码" @input="getNewPwd">
					<input type="safe-password" password placeholder="请再次输入新密码确认" 
						   @input="getConfirm" @blur="checkPwd()">
					
					<view class="back" @click="back">
						返回
					</view>
					
					<view class="changePwd" @click="changePwd">
						修改密码
					</view>
				</view>
			</uni-transition>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				screenHight: undefined,
				step1Show: true,
				step2Show: false,
				isGetCode: false,
				codeSend: false,
				mail:undefined,
				isMailPass: false,
				account: undefined,
				newPwd:undefined,
				confirmPwd:undefined,
				newPwdPass:false,
				step1Pass: false,
				code:undefined,
				wait: 0,
				timer:null,
				mailReg:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
				errorStyle:"1rpx solid rgba(255,0,0,0)",
			}
		},
		methods:{
			getAccount(e){
				this.account = e.detail.value
			},
			getEmail(e){
				this.mail = e.detail.value
			},
			checkMail(){
				if(this.mail && !this.isMailPass){
					if(!this.mailReg.test(this.mail)){
						this.errorStyle = "1rpx solid rgba(255,78,62,1)";
						uni.showToast({
							icon:'error',
							title:'请检查邮箱格式',
							duration:1200
						})
					}else{
						this.errorStyle = "1rpx solid rgba(255,78,62,0)";
						this.isMailPass = true;
					}
				}
			},
			getCode(e){
				this.code = e.detail.value
			},
			async sendCode(){
				console.log('begin')
				if(this.isGetCode == false){
					console.log('pass')
					if(this.account&&this.mail&&this.isMailPass){
						console.log('send')
						uni.showToast({
							icon:'success',
							title:"验证码已发送",
							duration:1200,
							mask:true
						})
						
						this.codeSend = true;
						
						this.wait = 60
						
						uni.request({
							method: "GET",
							url:`http://192.168.31.146:8090/user/mails/mailCode/${this.mail}`,
						}).then(res => {
							console.log(res)
							if(res.data.code == 200 && res.data.success == false){
								uni.showToast({
									icon:'none',
									title:'后台异常',
									duration:1200
								})
							}else if(res.data.code != 200){
								uni.showToast({
									icon:"error",
									title:"验证码发送失败，请稍后重试",
									duration:1200,
									mask:true
								})
							}
							
							if (!this.timer) {
								this.isGetCode = true
								console.log(this.isGetCode)
								this.timer = setInterval(() => {
									if (this.wait > 0 && this.wait <= 60) {
										this.wait--;
										console.log(this.wait)
									} else {
										this.isGetCode = false;
										clearInterval(this.timer);
										this.timer = null;
									}
								}, 1000)
							}
						})
					}else{
						uni.showToast({
							icon:"none",
							title:"请检查信息",
							duration:1200,
							mask:true
						})
					}
				}else{
					uni.showToast({
						icon: 'none',
						title: "请稍后再发送",
						duration: 1200,
						mask:true
					})
				}
			},
			next(){
				/*
				setTimeout(()=>{
					this.step2Show = true
				},350)
				this.step1Show = false
				*/
				if(this.account && this.mail && this.code && this.isMailPass && this.code){
					if(this.codeSend){
						setTimeout(()=>{
							this.step2Show = true
						},350)
						
						this.step1Show = false
						this.step1Pass = true
					}else{
						uni.showToast({
							icon:"error",
							title:"请先获取验证码",
							duration:1200
						})
					}
				}else{
					uni.showToast({
						icon:'error',
						title:"请检查信息",
						duration:1200,
						mask:true,
					})
				}
			},
			getNewPwd(e){
				this.newPwd = e.detail.value
				console.log(this.newPwd)
			},
			getConfirm(e){
				this.confirmPwd = e.detail.value
			},
			checkPwd(){
				if(this.newPwd !== this.confirmPwd){
					uni.showToast({
						icon:'error',
						title:'两次密码输入不一致',
						duration:1200,
						mask:true
					})
				}else{
					this.newPwdPass = true
					
				}
			},
			changePwd(){
				if(this.step1Pass && this.newPwdPass){	
					uni.request({
						method:'POST',
						url:`http://192.168.31.146:8090/user/front/retrieve/${this.mail}`,
						data:{
							userName:this.account,
							password:this.newPwd,
							rePassword:this.confirmPwd,
							mail:this.mail,
							code:this.code
						}
					}).then(res => {
						console.log(res)
						if(res.data.code == 200){
							setTimeout(()=>{
								this.back()
							},1600)
							
							uni.showToast({
								icon:'success',
								title:"密码修改成功",
								duration:1200
							})
						}else{
							uni.showToast({
								icon:'error',
								title:"请检查验证码",
								duration:1200
							})
						}
					})
				}
			},
			back(){
				if(this.wait != 0 || this.timer != null){
					this.wait = 0
					clearInterval(this.timer)
					this.timer = null
				}
				
				uni.navigateTo({
					url:'./loginAndRegister',
					animationDuration:350,
					animationType:'slide-in-right'
				})
			}
		},
		onLoad(options) {
			this.screenHight = options.screenHight
		}
	}
</script>

<style scoped>
	.container{
		width: 100%;
		background-color:#FEFFF7;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.title{
		position: relative;
		top: 80rpx;
		color: black;
		font-size: 1.2rem;
		font-weight: bold;
		letter-spacing: 0.3rem;
	}
	input{
		position: relative;
		width: 400rpx;
		height: 90rpx;
		border-radius: 10rpx;
		border: #F8F8F6;
		background-color: rgba(222, 222, 222, 0.3);
		font-size: 0.8rem;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		letter-spacing: 3rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		color: rgba(189, 189, 189, 1.0);
		margin-bottom: 30rpx;
		border: 1rpx solid rgba(222, 222, 222, 0);
	}
	.code{
	}
	.code>input{
		width: 350rpx !important;
		padding-right: 75rpx;
	}
	.code>.sendCode{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px;
		font-weight: 300;
		font-size: 0.8rem;
		color: deepskyblue;
		height: 34px;
		top: 70%;
		left: 55%;
		width: 40%;
		border-left: 1px solid rgba(222, 222, 222, 0.3);
	}
	.main{
		margin-top: 130rpx;
		width: 100%;
		height: 800rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.step1{
		display: flex;
		flex-direction: column;
		width: 105%;
		height: 80%;
	}
	.next{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 160%;
		color: white;
		font-size: ;
		width: 102%;
		height: 80rpx;
		background-color: #73C3FF;
		border-radius: 10rpx;
		letter-spacing: 2rpx;
	}
	.step2{
		width: 100%;
	}
	.back{
		position: relative;
		top: 5%;
		color: #2DA8D8;
		left: 2%;
	}
	.changePwd{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 160%;
		color: white;
		font-size: 0.8rem;
		width: 102%;
		height: 80rpx;
		background-color: #73C3FF;
		border-radius: 10rpx;
		letter-spacing: 2rpx;
	}
</style>